<!-- 
	自定义 swiper 导航栏
	@todo 导航栏，如果需要横向滚动。没有实现。后续可以通过 scroll-view 来实现，如果需要 滚动。如何兼容？
	@todo 导航栏 滚动的话，不能用 flex，应该改为 行内样式，是自适应宽度，还是一个固定的宽度。
	@todo 后续将支持由父组件传入一个组件进来，直接在这里显示。调试时，发现，微信里不支持动态组件。
 -->
<template>
	
	<view class="my-tabs-swiper">
		<view class="my-tabs-swiper__header">
			<view 
				v-for="(item, index) in list" 
				:key="index" 
				:class="['nav-item', {
					'active': tabCurrentIndex === index
				}]" 
				@click="setTabsActive(item, index)"
			>
				{{ item[nameField] }}
			</view>
		</view>
		
		<view class="my-tabs-swiper__body">
			<swiper :current="tabCurrentIndex" @change="swiperChange" @transition="transition" style="height: 100%;">
				<swiper-item v-for="(item, index) in list" :key="index">
					<scroll-view  scroll-y="true" style="height: 100%;">
						<slot :name="item[slotField] ? item[slotField] : `name_${index}`" style="height: 100%;">
							<view class="swiper-item uni-bg-red" >{{ item[nameField] }}</view>
							<!-- <component :is="item.component" v-else ></component> -->
						</slot>
					</scroll-view>
				</swiper-item>
			</swiper>
		</view>
		
	</view>
</template>

<script>
	export default {
		name: "myTabsSwiper",
		props: {
			/**
			 * list 中应该具备 两个属性: 
			 * name属性，导航栏上显示的文案。可能 通过 nameField 指定 name值的字段。
			 * slotField属性，是swiper内部slot 的名字 将由 slotField 决定，如果缺失，slot的名字是 字符串 "name_" 拼接index
			 * @todo 后续会增加一个 component 字段，传入的是 一个vue组件。
			 */
			list: {
				type: Array,
				default() {
					return [
						{ name: '直接下推', count: '', id: ''},
						{ name: '间接下推', count: '', id: ''},
						{ name: '全部', count: '', id: ''},
					]
				}
			},
			nameField: {
				type: String,
				default: 'name'
			},
			current: {
				type: Number,
				default: 0
			},
			slotField: {
				type:String,
				default: 'slotName'
			},
			/**
			 * 导航模式，暂时支持两种，默认模式是flex布局。平均分配 。另外一种模式是 scroll 模式，
			 */
			navMode: {
				type: String,
				default: 'default'
			}
		},
		data() {
			return {
				tabCurrentIndex: 0,
				swiperCurrentIndex: 0
			}
		},
		computed: {
			localSlotName() {
				
			}
		},
		watch: {
			// 如果有需要异步设置 active, 这里做个监测。
			current(newVal) {
				this.tabCurrentIndex = newVal
			}
		},
		created() {
			this.tabCurrentIndex = this.current
		},
		methods: {
			setTabsActive(item, index) {
				this.tabCurrentIndex = index
				this.emitHandler(index)
			},
			transition() {
				// console.log(...arguments)
			},
			swiperChange(e) {
				const detail = e.detail || {}
				this.tabCurrentIndex = detail.current
				this.emitHandler(this.tabCurrentIndex)
			},
			emitHandler(index) {
				this.$emit('update:current', index)
				this.$emit('change', index)
			}
			
		}
	}
</script>

<style lang="scss">
	$base-color: #999999;
	.my-tabs-swiper {
		display: flex;
		flex-direction: column;
		height: 100%;
	}
	.my-tabs-swiper__body{
		flex: 1;
	}
	// 这段代码，只实现了 navMode 为 default 模式下。
	// 很多关于颜色方面的样式,应该由外面传进来。
	.my-tabs-swiper__header {
		display: flex;
		background: #fff;
		width: 100%;
		box-shadow: 0px 10px 8px 0px rgba(0, 0, 0, 0.04);
		.nav-item {
			flex: 1;
			display: flex;
			justify-content: center;
			align-items: center;
			height: 100rpx;
			font-size: 30rpx;
			color: $base-color;
			position: relative;
		}

		.active {
			color: #ff8200;
			font-weight: 600;
			transition: all 300ms;

			&::after {
				content: '';
				position: absolute;
				display: inline-block;
				left: 50%;
				bottom: 0;
				width: 60%; // 这个值，不应该写死。暂时没时间来实现。
				transform: translateX(-50%);
				border-bottom: 4rpx solid #ff8200;
				background-color: $base-color;
			}
		}
	}
</style>